﻿<template>
  <div class="info-container">
    <!-- 导航栏 -->
    <nav class="info-nav">
      <div class="info-nav-item" v-for="item in navList" :key="item.key">
        <div
          :class="{
            'info-nav-item-step': true,
            'info-nav-item-step-normal': currentKey !== item.key,
            'info-nav-item-step-active': currentKey === item.key,
          }"
        >
          <div
            :class="{
              'info-nav-item-step-num': true,
              'info-nav-item-step-num-normal': currentKey !== item.key,
              'info-nav-item-step-num-active': currentKey === item.key,
            }"
          >
            <div class="div">{{ item.step }}</div>
          </div>
        </div>
        <div class="info-nav-item-title">{{ item.title }}</div>
        <div class="info-nav-item-line" v-if="item.step !== 6">
          <div class="line"></div>
        </div>
      </div>
    </nav>
    <!-- 商品信息 -->
    <div class="info-feild">
      <div class="info-feild-title">
        <div class="feild-title-icon">
          <div class="feild-title-icon-circle"></div>
        </div>
        <span>商品类目</span>
      </div>
    </div>
  </div>
</template>

<script setup>
  // 导航
  const navList = reactive([
    { key: "category", title: "选择商品类目", step: 1 },
    { key: "information", title: "设置商品信息", step: 2 },
    { key: "lease", title: "租赁设置", step: 3 },
    { key: "plan", title: "方案设置", step: 4 },
    { key: "logistics", title: "设置物流信息", step: 5 },
    { key: "publish", title: "发布商品", step: 6 },
  ]);
  // 当前高亮导航
  const currentKey = ref("category");
</script>

<style lang="scss" scoped>
  @use "@/style/app.scss" as *;
  .info-container {
    .info-nav {
      width: 100%;
      height: 80px;
      background-color: var(--fl7);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .info-nav-item {
        width: 12%;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        .info-nav-item-step {
          position: relative;
          border-radius: 100px;
          box-sizing: border-box;
          width: 36px;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: flex-start;
          padding: 3px;
          text-align: center;
          font-size: 16px;
          color: #fff;
          font-family: "PingFang SC";
          .info-nav-item-step-num {
            width: 28px;
            border-radius: 100px;
            height: 28px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 10px;
            box-sizing: border-box;
            font-size: 16px;
            .div {
              position: relative;
              line-height: 24px;
              font-weight: 500;
            }
          }
        }
        .info-nav-item-step-normal {
          border: 1px dashed var(--fl5);
        }
        .info-nav-item-step-num-normal {
          background: var(--fl4);
          color: var(--ct1);
        }
        .info-nav-item-step-active {
          border: 1px dashed var(--bd5);
        }
        .info-nav-item-step-num-active {
          background: linear-gradient(130.6deg, var(--bd5), var(--bd3));
          color: #fff;
        }

        .info-nav-item-title {
          color: var(--ct1);
          font-size: 16px;
          margin-left: $mr-10;
        }
        .info-nav-item-line {
          width: 80%;
          position: absolute;
          top: 18px;
          right: -65%;
          display: flex;
          .line {
            width: 100%;
            height: 1px;
            border: 1px dashed #c8c4c4;
          }
          .arrow-right {
            width: 16px;
            height: 16px;
          }
        }
      }
    }
    .info-feild {
      padding: $mr-16;
      background-color: var(--fl7);
      border-radius: 12px;
      margin-top: $mr-16;
      .info-feild-title {
        .feild-title-icon {
          width: 16px;
          height: 16px;
          background-color: var(--bd3);
          position: relative;
          border-radius: 50%;
          margin-left: 10px;
          margin-top: 5px;
          .feild-title-icon-circle {
            width: 14px;
            height: 14px;
            background: linear-gradient(130.6deg, var(--bd5), var(--bd3));
            position: absolute;
            top: -6px;
            left: -6px;
            border-radius: 50%;
          }
        }
      }
    }
  }
</style>
